﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Wallet Baristas</title>

<link rel="stylesheet" type="text/css" href="/content/css/style.css" media="screen" />

  <script type="text/javascript"
        language="javascript"
          src="@Sample.Config.sandboxJSURL">
  </script>

<script type="text/javascript"
        language="javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

<script type='text/javascript'>

    // Handle wallet failure case
    function failureFullWallet(error, detail) {
        log('--------------------------');
        log("There was an error getting the full wallet: " + error + "\n" + detail);
    }

    // Logging for demonstration purposes
    function log(msg) {
        if (console && console.log) {
            console.log(msg);
        }
    }

    //////////////////////////////////////////////////////////////////////
    // Wallet control
    //////////////////////////////////////////////////////////////////////
    function successMaskedWallet(jwt) {
        log('--------------------------');
        log("Handling the masked wallet.");
        log(jwt);

        // populate the hidden form field with the masked wallet contents
        $("#maskedWalletJWT").val(jwt);

        // submit the form
        document.forms["updateCredentials"].submit();
    }

    function failureMaskedWallet(error, detail) {
        log('--------------------------');
        log("There was an error getting the masked wallet: " + error + "\n" + detail);
    }

</script>
</head>
<body>
  <div id="header">
    <h1>Wallet Baristas</h1>
  </div>
  
  <form id="purchaseConfirmForm" name="purchaseConfirmForm" 
        action="/Receipt"
        method="post"
        onSubmit="return goog.wallet.requestFullWallet(&quot;@ViewData["fullWalletRequestJWT"]&quot;, &quot;fullWalletJWT&quot;, failureFullWallet);">

  <div id="finish_order">
  	<h2>Order Details</h2>
    <div id="formatBar">
      <table>
      	<tr>
      	  <td>
          <div class="offset"><strong>Order: </strong>@Request["drink"]</div>
          <div class="offset"><strong>Total: $</strong>@Request["formTotal"]</div>
      	  </td>
      	</tr>
      </table>

      <!-- orderDescription and fullWalletRequestJWT below are only used to communicate state back to the server.
           A real implementation will not need to use this technique and will only need the fullWalletJWT input. -->
      <input type="hidden" name="orderDescription" id="orderDescription" value="@Request["drink"]"> 
      <input type="hidden" name="formTotal" id="formTotal" value="@Request["formTotal"]"> 
      <input type="hidden" name="fullWalletRequestJWT" id="fullWalletRequestJWT" value="@ViewData["fullWalletRequestJWT"]"> 
      <input type="hidden" name="fullWalletJWT" id="fullWalletJWT"> 
      <div class="offset"><input type="submit" value="Finish & Pay"></div>
    </div>
    
    <h2>Payment Details</h2>
    <h4>Card Details</h4>
    <div id="formatBar">
    <div class="offset"><b>name: </b>@ViewData["name"]</div>
    <div class="offset"><b>card name: </b>@ViewData["cardName"]</div>
    <div class="offset"><b>type: </b>@ViewData["type"]</div>
    <div class="offset"><b>last 4 digits: </b>@ViewData["lastFourDigits"]</div>
    <div class="offset"><b>expiration: </b>@ViewData["expirationMonth"]/@ViewData["expirationYear"]</div>
    </div>
    <h4>Billing Address</h4>
    <div id="formatBar">
    <div class="offset"><b>company: </b>@ViewData["payCompany"]</div>
    <div class="offset"><b>address1: </b>@ViewData["payAddress1"]</div>
    <div class="offset"><b>address2: </b>@ViewData["payAddress2"]</div>
    <div class="offset"><b>city: </b>@ViewData["payCity"]</div>
    <div class="offset"><b>state: </b>@ViewData["payState"]</div>
    <div class="offset"><b>postal code: </b>@ViewData["payPostalCode"]</div>
    <div class="offset"><b>country: </b>@ViewData["payCountry"]</div>
    <div class="offset"><b>phone #: </b>@ViewData["payPhone"]</div>
    </div>
    <h4>Shipping Address</h4>
    <div id="formatBar">
    <div class="offset"><b>company: </b>@ViewData["shipCompany"]</div>
    <div class="offset"><b>address1: </b>@ViewData["shipAddress1"]</div>
    <div class="offset"><b>address2: </b>@ViewData["shipAddress2"]</div>
    <div class="offset"><b>city: </b>@ViewData["shipCity"]</div>
    <div class="offset"><b>state: </b>@ViewData["shipState"]</div>
    <div class="offset"><b>postal code: </b>@ViewData["shipPostalCode"]</div>
    <div class="offset"><b>country: </b>@ViewData["shipCountry"]</div>
    <div class="offset"><b>phone #: </b>@ViewData["shipPhone"]</div>
      <br />
      <div class="offset"><g:wallet jwt="@ViewData["maskedWalletRequestJWT"]" mode="change" onSuccess="successMaskedWallet(jwt)" 
      onFailure="failureMaskedWallet(error, detail)"></g:wallet></div>
  </div>
  </form>
  
  <form id="updateCredentials" name="updateCredentials" action="/Confirm" method="post">
  <input type="hidden" name="drink" id="drink" value="@Request["drink"]" />
  <input type="hidden" name="size" id"size" value="@Request["size"]" />
  <input type="hidden" name="milk" id"milk" value="@Request["milk"]" />
  <input type="hidden" name="pickup" id="pickup" value="@Request["pickup"]" />
  <input type="hidden" name="formTotal" id="formTotal" value="@Request["formTotal"]" />
    <input type="hidden" name="maskedWalletJWT" id="maskedWalletJWT" value="">
  </form>
</body>
</html>